
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="管理后台">
    <meta name="author" content="leedut">
    <title>BootAdmin 管理后台</title>
    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/bootadmin.theme.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
        <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="../js/ueditor.config.js"></script>
    <script type="text/javascript" src="../js/ueditor.all.js"></script>
</head>
<body>
    <!--顶部栏-->
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">XXX 管理平台</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">后台中心</a></li>
                    <li><a href="#">退出</a></li>
                </ul>
                <form class="navbar-form navbar-right">
                    <input type="text" class="form-control" placeholder="可提供搜索功能...">
                </form>
            </div>
        </div>
    </nav>
    <div class="container-fluid">
        <div class="row">
            <!--侧边栏-->
            <div class="col-sm-3 col-md-2 sidebar">
                <ul class="nav nav-sidebar">
                    <li class="active"><a href="#">总览 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">添加博文</a></li>
                    <li><a href="#">设置置顶</a></li>
                    <li><a href="#">修改博文</a></li>
                </ul>
                <ul class="nav nav-sidebar">
                    <li><a href="">添加管理员账号</a></li>
                    <li><a href="">Nav item again</a></li>
                    <li><a href="">One more nav</a></li>
                    <li><a href="">Another nav item</a></li>
                    <li><a href="">More navigation</a></li>
                </ul>
                <ul class="nav nav-sidebar">
                    <li><a href="">Nav item again</a></li>
                    <li><a href="">One more nav</a></li>
                    <li><a href="">Another nav item</a></li>
                </ul>
            </div>
            <!--右侧内容区-->
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 admin-main">
                <h1 class="page-header">AJAX模板</h1>
                <h2 class="sub-header">示例代码</h2>
                <form class="col-md-6 col-md-offset-3">
                    <div class="form-group">
                        <label for="exampleInputEmail1">请输入邮件地址</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">请输入用户密码</label>
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                    </div>
                    <div class="checkbox">
                        <label>
                          <input type="checkbox" id="exampleCheckbox">记住账号
                        </label>
                    </div>
                    <p class="text-center">
                        <button id="J_submit_btn" type="submit" class="btn btn-default">确认登录</button>
                    </p>
                </form>
            <!--div end 容器底部-->
            </div>
        </div>
    </div>
    <!-- Bootstrap core JavaScript ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <!--表单提交JS代码 位置应位于Jquery.min下方-->
    <script type="text/javascript">
    (function(){
        var isSubmiting = false;
        //绑定提交事件
        $('#J_submit_btn').click(function(){
            if(isSubmiting){ //防止二次重复提交
                return false;
            }
            var _data = {
                email:$('#exampleInputEmail1').val(),
                password:$('#exampleInputPassword1').val(),
                remember:$('#exampleCheckbox').prop('checked')
            }
            if( !_data.email ){
                alert('请填写邮箱！');
                return false;
            }
            if( !_data.password ){
                alert('请填写邮箱！');
                return false;
            }
            //AJAX提交
            isSubmiting = true;
            $.ajax({
                url: "/ajax",
            　　data: _data,
            　　type: "post",
                dataType:'json',
            　　success:function(data){
                    console.log('返回的数据为',data);
                    window.location.reload();   //刷新
                },
                error:function(err){
                    console.log('出现错误了',err);
                    isSubmiting = false;
                }
            });
        });
        /*IFEE end*/
    })();
    </script>
</body>
</html>
